<script setup>
import { ref, reactive, onMounted,onBeforeMount } from "vue"
import { ElMessage } from 'element-plus'
import axios from 'axios'
//期刊名称，iSSN，简称，学科分类
let type_value = ref('');
//Q1，Q2，Q3，Q4
let JCR_value = ref('');
//分区
let fenQ_value = ref('');
//综合占比
let sumUp_value = ref('');
//搜索框值
let keyword = ref("")
// type option
let options = reactive([
    {
        value: 'issn',
        label: 'ISSN'
    },
    {
        value: '期刊名称',
        label: '期刊名称'
    },
    {
        value: 'abbr',
        label: '简称'
    },
    {
        value: 'category',
        label: '学科分类'
    },
])
// JCR 
let JCR = reactive([
    {
        value: '',
        label: '不限'
    },
    {
        value: '8',
        label: 'Q1'
    },
    {
        value: '4',
        label: 'Q2'
    },
    {
        value: '2',
        label: 'Q3'
    },
    {
        value: '1',
        label: 'Q4'
    }
])
// 分区
let fenQ = reactive([
    {
        value: '',
        label: '不限'
    },
    {
        value: '1',
        label: '1区'
    },
    {
        value: '2',
        label: '2区'
    },
    {
        value: '3',
        label: '3区'
    },
    {
        value: '4',
        label: '4区'
    }
])
//综述占比
let sumUp = reactive([
    {
        value: "",
        label: '不限'
    },
    {
        value: "1,2",
        label: '0-5%'
    },
    {
        value: "5,10",
        label: '5%-10%'
    },
    {
        value: "10,20",
        label: '10%-20%'
    },
    {
        value: "20,30",
        label: '20%-30%'
    },
    {
        value: "30,50",
        label: '30%-50%'
    },
    {
        value: "50",
        label: '50%以上'
    }
])
//影响因子 左值
let inpact_L = ref('')
//影响因子 右值
let inpact_R = ref('')
//影响因子提示信息
const message = function () {
    if (inpact_L.value == '' || inpact_R.value == '') {
        ElMessage({
            message: '请输入影响因子开始值',
            type: 'warning',
        })
    }

}
//table
const tableData = ref([])
// 分页
// 总数
let total = ref(0)
// 每页多少
let pageSize = ref(10)
// 当前页
let pageNum = ref(1)
// 
let keywordType = ref('title')
// 综合占比
let trrl = ref(null)
let trrr = ref(null)
//点击页数触发
// const handleSizeChange = (val) => {
//     console.log(`${val} items per page`)
// }
//点击页数触发
const handleCurrentChange = async (val) => {
    data.value.pageNum = val
    await getTableDataFn()
}
const data = ref(
    {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        total: total.value,
        keywordType: 'title',
        keyword: keyword.value,
        ifStart_2019: "",
        ifEnd_2019: "",
        ifStart: "",
        ifEnd: "",
        jcr: "",
        sub: "",
        selfCitingRate: 'all',
        compatriotRate: 'all',
        isDomestic: "",
        totalReviewRatio: "all",
        categoryId: '1e78b26454e2878930f44c6a571be497',
        recommend: 0,
        selfStart: "",
        selfEnd: "",
        numberStart: "",
        numberEnd: "",
        trrl: "",
        trrr: "",
        order: "",
        orderType: ""
    })
const isLoading = ref(true)

onMounted( () => {
    // getTableDataFn()
    // console.log('mount');
    
})
onBeforeMount(()=>{
    getTableDataFn()
    // console.log('before');
    
})

//请求数据
const getTableDataFn = async function () {
    isLoading.value = true
    let res = await axios({
        url: 'https://test-ijournal-service.topeditsci.com/api/v1/journal/search',
        method: 'GET',
        params: data.value
    })
    if (res.status == 200) {
        // table数据
        tableData.value = res.data.data_original.data
        // 分页总数
        total.value = res.data.data_original.total
        tableData.value.forEach((item, index) => {
            if (item[index] == null) {
                item[index] = '-'
            }

            if (item.isDomestic == 1) {
                item.isDomestic = '是'
            } else {
                item.isDomestic = '否'
            }
            // JCR分区
            if (item.jcrZone == '8') {
                item.jcrJson = 'Q1'
            } else if (item.jcrZone == '4') {
                item.jcrJson = 'Q2'
            } else if (item.jcrZone == '2') {
                item.jcrJson = 'Q3'
            } else if (item.jcrZone == '1') {
                item.jcrJson = 'Q4'
            } else {
                item.jcrJson = '-'
            }
            //影响因子
            item.impactFactor_2019 === '0.000' ? item.impactFactor_2019 = '-' : item.impactFactor_2019

        });
        isLoading.value = false

    }
}
// JCR修改select
const JCRChnage = function () {
    // console.log(JCR_value.value);
    data.value.jcr = JCR_value.value
    getTableDataFn()
}
// 分区修改select
const fenQChange = function () {
    data.value.sub = fenQ_value.value
    getTableDataFn()
}
//综合占比
const sunUpChange = function () {
    let res = sumUp_value.value.split(',')
    data.value.trrl = res[0]
    data.value.trrr = res[1]
    getTableDataFn()
}
// 关键字搜索
const keywordSearch = function () {
    data.value.keyword = keyword.value
    data.value.categoryId = ""
    getTableDataFn()
}
// 影响因子
const inpact_Blur_Fn = function () {
    if (inpact_L.value != '' && inpact_R.value != '') {
        data.value.ifStart_2019 = inpact_L.value
        data.value.ifEnd_2019 = inpact_R.value
        getTableDataFn()
    }
}
//type值发生变化
const typeChange = function () {
    data.value.keywordType = type_value.value
    getTableDataFn()
}

</script>

<template>
    <div class="content">
        <!-- 头部 -->
        <div class="nav_context">
            <div class="nav_head">
                <div class="left">
                    <span>TODEDIT</span>
                    <span>|</span>
                    <span>IJOURNAL</span>
                </div>

                <div class="right">
                    <span>期刊详情查询</span>
                    <span>AI智能选刊</span>
                    <span>期刊解析与推荐</span>
                    <span>iThenticate查重</span>
                    <span>关于我们</span>
                    <span style="border-right: none; background-color: #0fa4b3; color: white;padding:5px;">登录/注册</span>
                </div>
            </div>
        </div>

        <div class="search_context">
            <div class="search_component">
                <el-select v-model="type_value" :placeholder="options[1].label" class="el-select" @change="typeChange">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-input v-model="keyword" class="el-input" style="flex: 1;height: 100%;" placeholder="请输入内容" />
                <el-icon size="17" color="white" style="width: 58px;height: 100%; background-color: #0fa4b3;"
                    @click="keywordSearch">
                    <search></search>
                </el-icon>
            </div>
            <div class="search_select">
                <div>
                    <span>影响因子</span>
                    <el-input v-model="inpact_L" @click="message" @blur="inpact_Blur_Fn"></el-input>
                    <span>-</span>
                    <el-input v-model="inpact_R" @click="message" @blur="inpact_Blur_Fn"></el-input>
                </div>
                <div>
                    <span>JCR分区</span>
                    <el-select v-model="JCR_value" :placeholder="JCR[0].label" class="el-select" @change="JCRChnage">
                        <el-option v-for="item in JCR" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div>
                    <span>分区</span>
                    <el-select v-model="fenQ_value" :placeholder="fenQ[0].label" class="el-select" @change="fenQChange">
                        <el-option v-for="item in fenQ" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>

                </div>
                <div>
                    <span>综述占比</span>
                    <el-select v-model="sumUp_value" :placeholder="sumUp[0].label" class="el-select"
                        @change="sunUpChange">
                        <el-option v-for="item in sumUp" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>

        </div>

        <div class="table">
            <el-table v-loading="isLoading" header-align="center" :data="tableData"
                style="width: 100%; margin-bottom: 20px" row-key="id" default-expand-all>
                <el-table-column prop="journalTitle" label="期刊名称" width="200" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.journalTitle }}</span>
                        <br />
                        <span style="color:#ccc">{{ scope.row.abbrJournal }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="journalDb" label="数据库" align="center" sortable width="110" />
                <el-table-column prop="impactFactor_2019" label="影响因子" align="center" sortable width="110" />
                <el-table-column prop="quote_factor" label="引文指标" align="center" sortable width="110">
                    <template #default="scope">
                        <span>{{ scope.row.quote_factor != 0 ? scope.row.quote_factor : '-' }}</span>

                    </template>
                </el-table-column>
                <el-table-column prop="jcrJson" label="JCR分区" align="center" width="110">
                    <template #default="scope">
                        <span>{{ scope.row.jcrJson }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="subZone" label="国内分区" align="center" sortable width="110">
                    <template #default="scope">
                        <span v-if="scope.row.subZone != 0">{{ scope.row.subZone }}区</span>
                        <span v-else> - </span>
                    </template>
                </el-table-column>
                <el-table-column prop="annualPublication" label="年发文亮" align="center" sortable width="110">
                    <template #default="scope">
                        <span>{{ scope.row.annualPublication != 0 ? scope.row.annualPublication : '-' }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="totalReviewRatio" label="综合占比" align="center" sortable width="120">
                    <template #default="scope">

                        <span v-if="scope.row.totalReviewRatio == null">-</span>
                        <span v-else>{{ scope.row.totalReviewRatio }}%</span>
                        <!-- <span v-if=""></span> -->
                    </template>
                </el-table-column>

                <el-table-column prop="open_ratio" label="是否开源/开源占比" align="center" sortable>
                    <template #default="scope">
                        <span>{{ (scope.row.open_ratio * 100).toFixed(2) }}%</span>
                    </template>
                </el-table-column>-
                <el-table-column prop="isDomestic" label="是否国" align="center" sortable />
            </el-table>

            <div class="pagination">
                <!-- 分页 -->
                <el-pagination background layout="prev, pager, next" :total="total"
                    @current-change="handleCurrentChange" :page-size="pageSize" @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<style lang='scss' scoped>
@import url('../styles/search.scss');

</style>